<template>
  <div id="app">
    <Map :access-token="accessToken"></Map>
    <!-- <Legend class="legend"></Legend> -->
    <Toolbar class="toolbar"></Toolbar>
    <Sidebar class="sidebar"></Sidebar>
  </div>
  <Mapcontrol class="control-panel"></Mapcontrol>
  <div class="hide_show_btn" @click="hiddenPanel">
    <span>></span>
  </div>
</template>


<script>

export default {
  methods: {
    hiddenPanel:function() {
      if($(".control-panel").is(":visible")){
        $(".hide_show_btn span").text(">");
        $(".hide_show_btn span").attr('title','显示');
        $(".control-panel").fadeOut(200);
        $("#map-container").animate({'left':'0px'},200);
        $(".hide_show_btn").animate({'left':'0px'},200);
      }else{
        $(".hide_show_btn span").text("<");
        $(".hide_show_btn span").attr('title','隐藏');
        $(".control-panel").fadeIn(200);
        $("#map-container").animate({'left':'250px'},200);
        $(".hide_show_btn").animate({'left':'250px'},200);
      }
    }
  },
  data () {
    return {
      accessToken: 'pk.eyJ1IjoibWFwZXIiLCJhIjoiY2l4Z3gxaTliMDAxMjJ5dG1iNjAxcmJ3MiJ9.SzNnsW1nwiAraIkhlYlPfA'
    }
  },
  events:{
    'map-bounds-change':function(params) {
      this.$broadcast('map-bounds-change',params);
    },
    'broadcast-style':function(style){
      this.$broadcast('style-change',style);
    }
  }
}
</script>


<style>
html, body {
  height: 100%;
}

/** {
  outline: red solid 1px;
}*/
</style>

<style scoped>
#app {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
}

.legend {
  position: absolute;
  top: 15px;
  left: 15px;
}

.toolbar {
  display: none;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%);
}

.sidebar {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
}

.control-panel{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  background-color: white;
  display: none;
}
.hide_show_btn {
  position: absolute;
  background-color: #f7f7f7;
  top: 50%;
  left: 0;
  cursor: pointer;
  width: 13px;
  height: 60px;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  border-right: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  padding-right: 4px;
}
.hide_show_btn:hover {
  background-color: #DCD9D9;
}
.hide_show_btn span {
  font-size: 16px;
  line-height: 58px;
  font-family: cursive;
}
</style>
